<template>
  <div>
    <cusDialog ref="dialog" width="630px" title="设备绑定" headCss="float:left;"
      @confrim="confrimHandler">
      <cusTransfer :data="transferData" ref="trandferRef"></cusTransfer>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();

const dialog = ref(null);

const show = () => {
  dialog.value.show = true;
};

const transferData = [
  { label: "设备1", key: 1 },
  { label: "设备2", key: 2 },
  { label: "设备3", key: 4 },
  { label: "设备5", key: 5 },
  { label: "设备6", key: 6 },
  { label: "设备7", key: 7 },
];
const trandferRef = ref(null);
const confrimHandler = () => {
  console.log(trandferRef.value.transVal, 888);
  dialog.value.show = false;
};

defineExpose({ show });
</script>

<style lang="scss" scoped>
::v-deep .el-transfer {
  display: flex;
  align-items: center;
  justify-content: center;

  .el-button {
    margin: 5px 0 !important;
  }
}
::v-deep .el-transfer__buttons {
  display: flex;
  flex-direction: column;
}
</style>